<script setup lang="ts">
import AlarmTypeProportion from './components/AlarmTypeProportion.vue'
import AlarmCountVariation from './components/AlarmCountVariation.vue'
import AverageProcessPeriod from './components/AverageProcessPeriod.vue'
import AlarmTimeDistribution from './components/AlarmTimeDistribution.vue'

const year = ref(new Date().getFullYear())
</script>

<template>
  <div
    class="padding-sm flex-direction box-border flex container"
  >
    <ElForm inline>
      <ElFormItem label="年份">
        <ElDatePicker
          v-model="year"
          type="year"
          format="YYYY"
          value-format="YYYY"
        />
      </ElFormItem>
    </ElForm>
    <BScrollbar class="flex-fillRemaining">
      <div class="grid grid-cols-2 gap-4" style="padding-bottom: 2px;">
        <div
          class="grid-item box-border"
          style="
            padding: 15px 10px;
            height: 300px;
            border: 1px solid #ddd;
          "
        >
          <AlarmTypeProportion />
        </div>
        <div
          class="grid-item box-border"
          style="
            padding: 15px 10px;
            height: 300px;
            border: 1px solid #ddd;
          "
        >
          <AlarmCountVariation />
        </div>
        <div
          class="grid-item box-border"
          style="
            padding: 15px 10px;
            height: 300px;
            border: 1px solid #ddd;
          "
        >
          <AverageProcessPeriod />
        </div>
        <div
          class="grid-item box-border"
          style="
            padding: 15px 10px;
            height: 300px;
            border: 1px solid #ddd;
          "
        >
          <AlarmTimeDistribution />
        </div>
      </div>
    </BScrollbar>
  </div>
</template>
